<template>
  <div class="content">
    <div class="title_flex">
      <div class="title_Top" @click="getLocationAndAddress">
        <van-icon name="location" color="#ffffff" size="24" />
        <!-- <van-icon name="location-o" color="#ffffff" size="28" /> -->
        <div class="WZ_size_12 marginLeft5">
          {{ districtName == "" ? "驿站未绑定" : districtName }}
        </div>
      </div>
      <div @click="delTC" class="WZ_size_16" style="color: #fff">退出</div>
    </div>
    <van-search
      v-model="value"
      shape="round"
      background="none"
      placeholder="请输入站点名称"
      @search="onSearch"
      @clear="onSearch"
    />
    <div class="swipe_box">
      <van-swipe
        :show-indicators="false"
        height="160"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item @click="JZTZ(item)" v-for="(item, index) in imgs" :key="index">
          <van-image :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="listBox">
      <div class="ul" v-if="routeList.length">
        <van-loading color="#1989fa" style="margin: 0 auto" v-if="show" />
        <div class="li" v-for="(item, index) in routeList" :key="index" @click="indexClick(item)">
          <van-image
            v-if="item.siteName != '更多服务'"
            class="liimg"
            :src="item.siteImage"
            mode=""
          ></van-image>
          <van-image
            v-else
            class="liimg"
            :src="require('../static/Homeimg/GD.png')"
            mode=""
          ></van-image>
          <!-- <van-image class="liimg" :src="item.siteImage" mode=""></van-image> -->
          <div class="litext">
            {{ item.siteName }}
          </div>
        </div>
      </div>
      <div v-else-if="deploy" class="ul WZ_size_12" style="justify-content: center">
        未搜索到该站点
      </div>
      <div v-else class="ul WZ_size_12" style="justify-content: center">
        <van-loading color="#1989fa" style="margin: 0 auto" v-if="show" />
        {{ routeState }}
      </div>
      <div style="border-radius: 10px" class="marginTop10">
        <van-notice-bar
          scrollable
          color="#1989fa"
          background="#ecf9ff"
          left-icon="volume-o"
          text="欢迎使用i生活职工共享驿站！"
        />
      </div>
      <div class="marginTop10" v-if="districtName != ''">
        <div style="display: flex; justify-content: space-between" v-if="WC_JK.length > 0">
          <div class="KJ" @click="WC_JKXX(item)" v-for="(item, index) in WC_JK" :key="index">
            <div class="textXX">
              <div class="WZ_size_20" style="color: #fff">
                {{ item.siteDescription }}
              </div>
              <div class="WZ_size_12" style="color: #fff">
                {{ item.lastUpdateTime }}
              </div>
            </div>
            <van-image style="width: 100%; height: 100%" :src="item.selected" mode=""> </van-image>
          </div>
        </div>
      </div>
      <div class="marginTop10" style="width: 100%">
        <div class="ul" style="width: 100%; box-sizing: border-box">
          <div
            class="paddingBottom10"
            style="display: flex; justify-content: space-between; width: 100%; align-items: center"
          >
            <div class="WZ_size_16" style="font-weight: 700">最新动态</div>
            <div
              class="WZ_size_12"
              style="color: rgb(158, 158, 158); display: flex; align-items: center"
            >
              <div class="marginRight3" @click="NewsXX">查看更多</div>
              <van-image width="14" height="14" :src="require('../index/img/JT.png')" mode="">
              </van-image>
            </div>
          </div>
          <van-divider />
          <div
            class="ZXDT paddingBottom10"
            style="width: 100%"
            v-for="(item, index) in Newslist"
            :key="index"
            @click="TZNewindex(item.id)"
          >
            <div class="ZXDT_left">
              <div class="top">{{ item.noticeName }}</div>
              <div class="date">{{ item.creationTime }}</div>
            </div>
            <div class="ZXDT_right">
              <van-image radius="4" width="140" height="72" :src="item.noticeImage" mode="">
              </van-image>
            </div>
          </div>
          <van-divider />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPostSiteList } from "@/api/realAssets/icsharedstation/getParent/index.js"
import { setrouteList } from "../common/routeList"
import { setmoreRoute } from "../common/moreRouteList"
import { Toast, Dialog } from "vant"
import {
  getImageList,
  getSiteInfoList02,
  getSiteInfowcjkList,
  getNewNotice2
} from "@/api/realAssets/icsharedstation/home"
import { getpersonalInformation } from "../common/RYXX"
export default {
  data() {
    return {
      routeState: "",
      show: false,
      imgs: [],
      value: "",
      userName: "",
      districtName: "",
      ishid: "",
      postId: "",
      routeList: [],
      deploy: false,
      Newslist: [],
      WC_JK: []
    }
  },
  mounted() {
    this.getYH()
  },
  methods: {
    indexClick(item) {
      localStorage.setItem("siteData", JSON.stringify(item))
      if (item.forwordUrl == "icsharedstation_XCFW_index") {
        this.$router.push({
          name: "rvicsharedstation-index",
          query: {
            id: 1
          }
        })
        return
      }
      if (item.forwordUrl == "icsharedstation_CPYY_index") {
        this.$router.push({
          name: "rvicsharedstation-index",
          query: {
            id: 2
          }
        })
        return
      }
      this.$router.push(item.forwordUrl)
      // router.push({
      //   path: item.forwordUrl,
      // });
    },
    JZTZ(val) {
      localStorage.setItem("siteData", JSON.stringify(val.site[0]))
      if (val.id == 1) {
        this.$router.push({
          name: "rvicsharedstation-BJFW"
        })
      } else if (val.id == 3) {
        this.$router.push({
          name: "rvicsharedstation-index",
          query: {
            id: 2
          }
        })
        // router.push({
        //   name: "i_life_cpyy_index",
        // });
      } else {
        this.$router.push({
          name: "rvicsharedstation-LYDJ_index"
        })
      }
    },
    // 跳转到新闻详情
    TZNewindex(val) {
      this.$router.push({
        name: "i_life_News",
        query: {
          id: val // 序列化对象
        }
      })
      // router.push({
      //   name: "i_life_News",
      //   query: {
      //     id: val, // 序列化对象
      //   },
      // });
    },
    WC_JKXX(obj) {
      localStorage.setItem("siteData", JSON.stringify(obj))
      let li = encodeURIComponent(JSON.stringify(obj).replace(/%/g, "%25"))
      this.$router.push(obj.forwordUrl)
      // router.push(obj.forwordUrl);
    },
    // 跳转新闻列表
    NewsXX() {
      this.$router.push({
        name: "i_life_Newslistindex"
      })
      // router.push({
      //   name: "i_life_Newslistindex",
      // });
    },
    // 请求新闻前三条
    getNews() {
      let obj = {
        postId: JSON.parse(getpersonalInformation()).postId,
        noticeType: "2",
        id: 0
      }
      getNewNotice2(obj).then((res) => {
        if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
          console.log(res.data)
          this.Newslist = []
          res.data.forEach((item, index) => {
            if (index <= 3) {
              this.Newslist.push(item)
            }
          })
        } else {
          Toast.fail("新闻加载失败")
          return
        }
      })
    },
    //获取文创和健康
    getWC_JK() {
      let obj = {
        postId: JSON.parse(getpersonalInformation()).postId
      }
      getSiteInfowcjkList(obj).then((res) => {
        if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
          console.log("xx", res.data)
          this.WC_JK = res.data
          // data.Newslist = [];
          // res.data.forEach((item, index) => {
          //   if (index <= 3) {
          //     data.Newslist.push(item);
          //   }
          // });
        } else {
          Toast.fail("加载失败")
          return
        }
      })
    },
    //搜索回车事件
    onSearch() {
      getPostSiteList({
        postId: JSON.parse(getpersonalInformation()).postId,
        siteName: this.value,
        pageCurrent: 1,
        pageSize: 100
      }).then((res) => {
        if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
          this.deploy = true
          let routeData = res.data // 全部路由
          let moreRoute = [] // 更多页路由
          let indexRoute = []
          for (let i = 0; i < res.data.length; i++) {
            moreRoute.push(res.data[i])
          }
          routeData.forEach((item, index) => {
            item.indexFlag == "Y" && indexRoute.push(item)
          })
          moreRoute.length >= 9 &&
            indexRoute.push({
              siteImage: "../../static/Homeimg/GD.png",
              siteName: "更多服务",
              indexFlag: "Y",
              forwordUrl: "/pages/pagesNew/GDFW/index/index" //跳转更多页面路由
            })
          this.routeList = indexRoute
          this.show = false
          setmoreRoute(moreRoute)
          setrouteList(indexRoute)
        } else {
          setmoreRoute("")
          setrouteList("")
          this.routeState = "站点未绑定"
          return
        }
      })
    },
    //选择驿站
    getLocationAndAddress() {
      if (this.ishid == "") {
        this.show = true
        return
      }
      this.$router.push({
        name: "rvicsharedstation-DQ"
      })
    },
    //退出职工共享驿站
    delTC() {
      Dialog.confirm({
        title: "退出应用",
        message: "是否确认退出本应用"
      }).then(() => {
        // on confirm
        this.$router.push({
          path: "/mainFrame/home"
        })
      })
    },
    getYH() {
      if (JSON.parse(getpersonalInformation())) {
        this.userName = JSON.parse(getpersonalInformation()).userName
        this.districtName = JSON.parse(getpersonalInformation()).districtName
        this.ishid = JSON.parse(getpersonalInformation()).ishid
        this.postId = JSON.parse(getpersonalInformation()).postId
        // //获取首页轮播
        getImageList({ postId: this.postId }).then((res) => {
          this.imgs = res.data
        })
        // //获取站点列表
        getSiteInfoList02({
          postId: this.postId
        }).then((res) => {
          if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
            this.deploy = false
            let routeData = res.data // 全部路由
            let moreRoute = [] // 更多页路由
            let indexRoute = []
            for (let i = 0; i < res.data.length; i++) {
              moreRoute.push(res.data[i])
            }
            routeData.forEach((item, index) => {
              item.indexFlag == "Y" && indexRoute.push(item)
            })
            moreRoute.length >= 9 &&
              indexRoute.push({
                siteImage: "../../static/Homeimg/GD.png",
                siteName: "更多服务",
                indexFlag: "Y",
                forwordUrl: "/pages/pagesNew/GDFW/index/index" //跳转更多页面路由
              })
            this.routeList = indexRoute
            this.show = false
            setmoreRoute(moreRoute)
            setrouteList(indexRoute)
            this.getNews()
            this.getWC_JK()
          } else {
            setmoreRoute("")
            setrouteList("")
            this.routeState = "站点未绑定"
            return
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../static/css/index.less";
.swipe_box {
  padding: 0 10px;
  box-sizing: border-box;
}
.content {
  height: 100%;
  width: 100%;
  background: url("../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100%;
}
.title_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
.title_Top {
  display: flex;
  align-items: center;
  // padding-top: 15px;
  // padding-bottom: 0px;
  // padding-left: 10px;
  // padding-right: 10px;
  box-sizing: border-box;
  color: #fff;
}
.my-swipe {
  width: 100%;
}
.u-swiper {
  background-color: transparent !important;
}

.ZXDT {
  display: flex;
  justify-content: space-between;

  .ZXDT_left {
    .top {
      margin-bottom: 18px;
      font-size: 15px;
    }

    .date {
      color: rgb(158, 158, 158);
      font-size: 12px;
    }
  }

  .ZXDT_right {
    margin-left: 5px;
  }
}

.content {
  height: 100%;
  width: 100%;
  background: url("../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
}

.KJ {
  position: relative;
  width: 48%;
  height: 80px;

  .textXX {
    position: absolute;
    left: 15px;
    top: 12px;
    z-index: 999;
    line-height: 30px;
  }
}

.title {
  padding: 20px 10px;
  padding-top: 30px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 30px;
}

.ZPxx {
  width: 95%;
  height: 125px;
  margin: 0 auto;
  display: block;
}

.listBox {
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  // padding: 20rpx;
  // padding-top: 0rpx;
  //margin-top: 20rpx;
  box-sizing: border-box;

  height: calc(
    var(--real-vh, 1vh) * 100 - 290px - env(safe-area-inset-bottom) - env(safe-area-inset-top)
  );
  overflow: hidden;
  overflow-y: auto;
}

.listBox::-webkit-scrollbar {
  display: none;
  /* 对于 Chrome, Safari, Edge */
}

.ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
  padding: 10px;

  .li {
    width: 25%;
    margin-bottom: 10px;
  }
}

.liimg {
  width: 44px;
  height: 54px;
  margin: 0 auto;
  display: block;
}

.litext {
  text-align: center;
  color: rgb(53, 53, 53);
  font-size: 12px;
}
</style>
